<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./css/main.css">
  <style>
    .content {
      overflow: hidden;
    }
    .right-query-form {
      float:right;
    }
    .control-label {
      margin-right:10px;
    }
    .form-group {
      margin-right:20px;
    }
    .radio-beauty {
      margin-right:10px;
      
    }
    .radio-beauty input {
      width: 80px;
      height: 32px;
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    .radio-beauty .radio-btn {
      border: none;
      outline: none;
      width: 80px;
      height: 32px;
      background: #f3f3f3;
      color: #333;
    }

    .radio-beauty input:checked+.radio-btn {
      background-color: #2B9DF8;
      color: #fff;
    }
    .instruction p {
      font-size:14px;
      text-indent: 20px;
      color:#333;
      margin-bottom:0;
      line-height:24px;
    }
  </style>
</head>

<body>
  <div class="content">
    <h5 class="content-title">投资评级</h5>
    <div class="row">
      <div class="col">
        <div class="box">
          <div class="box-header">
            <div class="header-title">投资评级</div>
          </div>
          <div class="box-body">
            <div class="chart" id="barChart" style="height:240px;"></div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="box">
          <div class="box-header">
            <div class="header-title">投资评级变动</div>
          </div>
          <div class="box-body">
            <div class="chart" id="lineChart" style="height:240px;"></div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="box">
          <div class="box-header">
            <div class="header-title">目标价变动</div>
          </div>
          <div class="box-body">
            <div class="chart" id="kChart" style="height:240px;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-header">
        <div class="header-title">投资评级情况</div>
      </div>
      <div class="box-body">
        <div class="chart" id="mixChart" style="height:300px;"></div>
      </div>
    </div>
    <div class="box">
      <div class="box-header">
        <div class="header-title">机构评级变化</div>
        <div class='right-query-form'>
          <form class="form-inline">
            <div class="form-group">
              <label class="control-label">研发机构</label>
              <select name="" id="" class="form-control">
                <option value="1">安徽证券</option>
                <option value="1">广发证券</option>
              </select>
            </div>
            <label for="" class="radio-beauty">
              <input type="checkbox" name="status" value="1" checked>
              <button class="radio-btn">全部</button>
            </label>
            <label for="" class="radio-beauty">
              <input type="checkbox" name="status" value="2">
              <button class="radio-btn">上调评级</button>
            </label>
            <label for="" class="radio-beauty">
              <input type="checkbox" name="status" value="3">
              <button class="radio-btn">下调评级</button>
            </label>
            <label for="" class="radio-beauty">
              <input type="checkbox" name="status" value="4">
              <button class="radio-btn">维持评级</button>
            </label>
            <label for="" class="radio-beauty">
              <input type="checkbox" name="status" value="5">
              <button class="radio-btn">调整目标价</button>
            </label>
          </form>
          
        </div>
      </div>
      <div class="box-body">
        <div class="chart" id="areaChart" style="height:300px;"></div>
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <div class="header-title">最新评级详细</div>
      </div>
      <div class="box-body">
        <table class="table table-border">
          <thead>
            <tr>
              <th>日期</th>
              <th>研发机构</th>
              <th>研究员</th>
              <th>评级</th>
              <th>前次评级</th>
              <th>目标价</th>
              <th>前次目标价</th>
              <th>摘要</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="font-gray">2020-08-05</td>
              <td>华夏证券</td>
              <td>张三</td>
              <td>买入</td>
              <td>增持[2020-04-01]</td>
              <td class='ar'>11.94</td>
              <td class='ar'>8.94</td>
              <td class="font-blue">
                <span>摘要</span>
              </td>
            </tr>
            <tr>
              <td class="font-gray">2020-08-05</td>
              <td>华夏证券</td>
              <td>张三</td>
              <td>买入</td>
              <td>增持[2020-04-01]</td>
              <td class='ar'>11.94</td>
              <td class='ar'>8.94</td>
              <td class="font-blue">
                <span>摘要</span>
              </td>
            </tr>
            <tr>
              <td class="font-gray">2020-08-05</td>
              <td>华夏证券</td>
              <td>张三</td>
              <td>买入</td>
              <td>增持[2020-04-01]</td>
              <td class='ar'>11.94</td>
              <td class='ar'>8.94</td>
              <td class="font-blue">
                <span>摘要</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="instruction">
          <div class="caption" style="font-size:16px;margin-bottom:20px;">说明：</div>
          <p>
            巴拉巴拉啦啦啦啦啦啦啦，巴拉巴拉啦啦啦啦啦啦啦，巴拉巴拉啦啦啦啦啦啦啦，巴拉巴拉啦啦啦啦啦啦啦，巴拉巴拉啦啦啦啦啦啦啦
          </p>
          <p>
            哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿,哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿哎嘿，哎嘿哎嘿哎嘿哎嘿哎嘿
          </p>
        </div>

      </div>
    </div>
  </div>
  <script src="plugins/jquery/jquery.min.js"></script>
  <script src="js/echarts.js"></script>
  <script>
    // 投资评级
    $(function () {
      var colorList = ["#2B9DF8", '#FBB969', '#F36154', '#3EC3CE', '#B1C5D4', '#705AFC', '#4363DA', '#00E574']
      var myChart = echarts.init(document.getElementById('barChart'))
      var xData = ['买入', '增持', '持有', '中性', '卖出']
      var option = {
        color: colorList,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              width: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#2B9DF8' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#2B9DF8' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#BDD8E9',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },

          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          left: '40',
          right: '40',
          top: '10%',
          bottom: '20%'
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: { //  改变x轴颜色
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: "#dfdfdf",
              fontSize: 12
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#DBDBDB 100%'],
              width: 1,
              type: 'solid'
            }
          },
          // boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(107,107,107,0.37)', //y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: "#4d4d4d",
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ecf2f2'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          "name": "",
          "type": "bar",
          "stack": "1",
          "barWidth": "15",
          "data": [60, 20, 10, 24, 7],
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: ''
            }
          }
        }]
      };

      myChart.setOption(option)
      // 把echart实例追加到最外层window上
      window.top.chartsList && window.top.chartsList.push(myChart)

    })
    // 投资评级变动

    $(function () {
      var colorList = ["#2B9DF8", '#FBB969', '#F36154', '#3EC3CE', '#B1C5D4', '#705AFC', '#4363DA', '#00E574']
      var myChart = echarts.init(document.getElementById('lineChart'))
      var xData = ['最新', '1月份', '2月份', '3月份', '4月份', '5月份', '6月份']
      var option = {
        color: colorList,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              width: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#2B9DF8' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#2B9DF8' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#BDD8E9',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },

          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          left: '40',
          right: '40',
          top: '10%',
          bottom: '20%'
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: { //  改变x轴颜色
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: "#dfdfdf",
              fontSize: 12
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#DBDBDB 100%'],
              width: 1,
              type: 'solid'
            }
          },
          // boundaryGap: false
        }],
        yAxis: [{
          name: '评级',
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40,
            align: 'center'
          },
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(107,107,107,0.37)', //y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: "#4d4d4d",
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ecf2f2'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          "name": "",
          "type": "line",
          "data": [1.2, 2.3, 2.4, 1.6, 1.9, 2.0, 2.1],
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: ''
            }
          }
        }]
      };

      myChart.setOption(option)
      // 把echart实例追加到最外层window上
      window.top.chartsList && window.top.chartsList.push(myChart)

    })
    // 目标价变动

    $(function () {
      var colorList = ["#2B9DF8", '#FBB969', '#F36154', '#3EC3CE', '#B1C5D4', '#705AFC', '#4363DA', '#00E574']
      var myChart = echarts.init(document.getElementById('kChart'))
      var xData = ['最新', '1月份', '2月份', '3月份', '4月份', '5月份', '6月份']
      var option = {
        color: colorList,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              width: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#2B9DF8' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#2B9DF8' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#BDD8E9',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },

          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
          formatter: function (p) {
            console.log(p)
            return '<h6>最新</h6><p style="margin:0;">最大值：' + p[0].data[1] + '</p><p style="margin:0;">目标价：' + p[
              1].data + '</p><p style="margin:0;">最小值：' + p[0].data[2] + '</p>'
          }
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: { //  改变x轴颜色
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: "#dfdfdf",
              fontSize: 12
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#DBDBDB 100%'],
              width: 1,
              type: 'solid'
            }
          },
          // boundaryGap: false
        }],
        yAxis: [{
          name: '目标价',
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40,
            align: 'right'
          },
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(107,107,107,0.37)', //y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: "#4d4d4d",
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ecf2f2'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          type: 'candlestick',
          itemStyle: {
            color: colorList[[0]],
            color0: colorList[[0]],
            borderColor: colorList[[0]],
            borderColor0: colorList[[0]]
          },
          data: [
            [50, 30, 50, 30],
            [45, 35, 45, 35],
            [33, 38, 33, 38],
            [40, 10, 40, 10],
            [50, 30, 50, 30],
            [45, 35, 45, 35],
            [33, 38, 33, 38]
          ]
        }, {
          name: '',
          type: 'line',
          smooth: true,
          data: [
            45, 40, 35, 30, 40, 42, 35
          ],
          itemStyle: {
            color: colorList[1]
          },
          z: 10
        }]
      };
      myChart.setOption(option)
      // 把echart实例追加到最外层window上
      window.top.chartsList && window.top.chartsList.push(myChart)
    })
    // 评级情况
    $(function () {
      var colorList = ["#2B9DF8", '#3EC3CE', '#B1C5D4', '#FBB969', '#F36154', '#705AFC', '#00E574', '#4363DA']
      var myChart = echarts.init(document.getElementById('mixChart'))
      var xData = ['2020-07-31', '2020-08-31', '2020-09-30', '2020-10-31', '2020-11-30', '2020-12-31', '2021-01-31',
        '2021-02-28', '2021-03-31', '2021-04-30', '2021-05-31'
      ]
      var option = {
        color: colorList,
        legend: {
          bottom: '5%',
          right: 'center',
          itemGap: 20,
          textStyle: {
            color: '#556677'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              width: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#2B9DF8' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#2B9DF8' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#BDD8E9',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },

          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          left: '40',
          right: '40',
          top: '20%',
          bottom: '25%'
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: { //  改变x轴颜色
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: "#dfdfdf",
              fontSize: 12
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#DBDBDB 100%'],
              width: 1,
              type: 'solid'
            }
          },
        }],
        yAxis: [{
          type: 'value',
          name: '评级占比（%)',
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40,
            align: 'center'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(107,107,107,0.37)', //y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: "#4d4d4d",
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ecf2f2'],
              width: 1,
              type: 'solid'
            }
          }
        }, {
          name: '收盘价',
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40,
            align: 'center'
          },
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(107,107,107,0.37)', //y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: "#4d4d4d",
              fontSize: 12
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#ecf2f2'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          "name": "买入（%）",
          "type": "bar",
          "stack": 1,
          "barWidth": "15",
          "data": [20, 10, 30, 40, 70, 40, 50, 30, 20, 10, 20],
          yAxisIndex: 0

        }, {
          "name": "增持（%）",
          "type": "bar",
          "stack": 1,
          "barWidth": "15",
          "data": [30, 10, 24, 30, 50, 20, 10, 60, 20, 10, 30],
          yAxisIndex: 0
        }, {
          "name": "中性（%）",
          "type": "bar",
          "stack": 1,
          "barWidth": "15",
          "data": [40, 30, 32, 53, 15, 24, 34, 45, 20, 10, 40],
          yAxisIndex: 0
        }, {
          "name": "减持（%）",
          "type": "bar",
          "stack": 1,
          "barWidth": "15",
          "data": [0, 10, 12, 0, 10, 20, 34, 45, 0, 10, 10],
          yAxisIndex: 0
        }, {
          "name": "卖出（%）",
          "type": "bar",
          "stack": 1,
          "barWidth": "15",
          "data": [10, 0, 22, 0, 10, 0, 34, 15, 0, 22, 8],
          yAxisIndex: 0
        }, {
          name: '到目标价',
          type: 'line',
          label: {
            normal: {
              show: false,
              position: 'top'
            }
          },
          data: [1, 10, 15, 22, 38, 20, 17, 10, 40, 30, 12],
          symbolSize: 4,
          symbol: 'circle',
          smooth: false,
          yAxisIndex: 1,
          showSymbol: true,
          lineStyle: {
            width: 2,
          }
        }, {
          name: '收盘价',
          type: 'line',
          label: {
            normal: {
              show: false,
              position: 'top'
            }
          },
          data: [2, 5, 15, 9, 18, 20, 4, 10, 20, 10, 12],
          symbolSize: 4,
          symbol: 'circle',
          smooth: false,
          yAxisIndex: 1,
          showSymbol: true,
          lineStyle: {
            width: 2,
          }
        }]
      };

      myChart.setOption(option)
      // 把echart实例追加到最外层window上
      window.top.chartsList && window.top.chartsList.push(myChart)
    })
    // 机构评级变化
    $(function () {
      var myChart = echarts.init(document.getElementById('areaChart'))
      var colorList = ["#2B9DF8", '#FBB969', '#F36154', '#3EC3CE', '#B1C5D4', '#705AFC', '#4363DA', '#00E574']
      var xData = ['2020/01', '2020/02', '2020/03', '2020/04', '2020/05', '2020/06', '2020/07']
      var option = {
        color: colorList,
        legend: {
          show: true,
          bottom: '5%',
          right: 'center',
          itemGap: 20,
          textStyle: {
            color: '#556677'
          }
        },
        tooltip: {
          trigger: 'axis',

          axisPointer: {
            lineStyle: {
              width: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#2B9DF8' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#2B9DF8' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#BDD8E9',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },

          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          left: '3%',
          right: '3%',
          top: '5%',
          bottom: '25%'
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: { //  改变x轴颜色
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: "#dfdfdf",
              fontSize: 12
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#DBDBDB 100%'],
              width: 1,
              type: 'solid'
            }
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          // max: 100,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(107,107,107,0.37)', //y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: "#4d4d4d",
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ecf2f2'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          name: '股价',
          type: 'line',
          data: [10, 10.2, 14, 12, 7, 8, 7],
          symbolSize: 1,
          symbol: 'circle',
          smooth: false,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 2,
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0.5,
                color: 'rgba(43,157,248,0.52)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(61,126,235,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }, {
          name:'买入',
          type: 'scatter',
          itemStyle: {
            borderColor: "#FBB969",
            borderWidth: 2,
            shadowColor: "#FBB969",
            shadowBlur: 10
          },
          symbolSize: 22,
          data: [
            ['2020/04', 12],
          ],
          
        },{
          name:'减持',
          type: 'scatter',
          itemStyle: {
            borderColor: "#F36154",
            borderWidth: 2,
            shadowColor: "#F36154",
            shadowBlur: 10
          },
          symbolSize: 22,
          data: [
            ['2020/06', 8],
          ],
          
        }]
      };

      myChart.setOption(option)
      // 把echart实例追加到最外层window上
      window.top.chartsList && window.top.chartsList.push(myChart)
    })
    // 最新评级详细
  </script>
</body>

</html>